<template>
  <view class="message-page">

    
    <!-- 消息统计卡片区域 -->
    <view class="message-cards">
      <!-- 新增粉丝卡片 -->
      <view class="message-card" @click="navigateToFansList" v-if="newFansCount > 0">
        <view class="card-icon">
          <icon type="contact" size="28" color="#007aff"></icon>
        </view>
        <view class="card-content">
          <text class="card-title">新增粉丝</text>
          <text class="card-desc">有{{ newFansCount }}位新粉丝关注了你</text>
        </view>
        <view class="card-badge">
          <text class="badge-text">{{ newFansCount }}</text>
        </view>
      </view>
      
      <!-- 点赞信息卡片 -->
      <view class="message-card" @click="navigateToLikesList" v-if="newLikesCount > 0">
        <view class="card-icon">
          <icon type="like" size="28" color="#ff3b30"></icon>
        </view>
        <view class="card-content">
          <text class="card-title">点赞信息</text>
          <text class="card-desc">有{{ newLikesCount }}个新的点赞</text>
        </view>
        <view class="card-badge">
          <text class="badge-text">{{ newLikesCount }}</text>
        </view>
      </view>
      
      <!-- 无新消息提示 -->
      <view class="no-message" v-if="newFansCount === 0 && newLikesCount === 0">
        <image src="/static/images/no-message.png" mode="widthFix" class="no-message-img"></image>
        <text class="no-message-text">暂无新消息</text>
      </view>
    </view>
    
    <!-- 历史消息列表 -->
    <view class="history-section">
      <text class="section-title">历史消息</text>
      
      <view class="history-list">
        <!-- 粉丝历史记录 -->
        <view class="history-item" v-if="historyFans.length > 0">
          <view class="item-icon">
            <icon type="contact" size="24" color="#007aff"></icon>
          </view>
          <view class="item-content">
            <text class="item-title">粉丝动态</text>
            <text class="item-desc">共{{ totalFans }}位粉丝关注你</text>
          </view>
          <view class="item-arrow">
            <icon type="right" size="18" color="#999"></icon>
          </view>
        </view>
        
        <!-- 点赞历史记录 -->
        <view class="history-item" v-if="historyLikes.length > 0">
          <view class="item-icon">
            <icon type="like" size="24" color="#ff3b30"></icon>
          </view>
          <view class="item-content">
            <text class="item-title">获赞记录</text>
            <text class="item-desc">共获得{{ totalLikes }}个赞</text>
          </view>
          <view class="item-arrow">
            <icon type="right" size="18" color="#999"></icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 新粉丝数量（页面离开时会重置）
      newFansCount: 0,
      // 新点赞数量（页面离开时会重置）
      newLikesCount: 0,
      // 历史粉丝数据
      historyFans: [],
      // 历史点赞数据
      historyLikes: [],
      // 粉丝总数
      totalFans: 0,
      // 获赞总数
      totalLikes: 0
    };
  },
  
  onShow() {
    // 页面显示时加载新消息数据
    this.loadNewMessages();
    this.loadHistoryMessages();
  },
  
  onHide() {
    // 页面隐藏时清除新消息计数
    this.clearNewMessages();
  },
  
  onUnload() {
    // 页面卸载时清除新消息计数
    this.clearNewMessages();
  },
  
  methods: {
    // 加载新消息数据
    loadNewMessages() {
      // 模拟从服务器获取新消息
      // 实际项目中这里应该是接口请求
      setTimeout(() => {
        this.newFansCount = 3; // 模拟3个新粉丝
        this.newLikesCount = 5; // 模拟5个新点赞
      }, 300);
    },
    
    // 加载历史消息数据
    loadHistoryMessages() {
      // 模拟从服务器获取历史消息
      setTimeout(() => {
        // 模拟历史粉丝数据
        this.historyFans = [
          { id: 1, name: '张三', avatar: 'https://picsum.photos/id/1005/200', followTime: '昨天' },
          { id: 2, name: '李四', avatar: 'https://picsum.photos/id/1012/200', followTime: '3天前' }
        ];
        this.totalFans = this.historyFans.length + this.newFansCount;
        
        // 模拟历史点赞数据
        this.historyLikes = [
          { id: 1, userId: 3, userName: '王五', avatar: 'https://picsum.photos/id/1027/200', contentId: '1001', contentTitle: '我的第一篇技术文章', contentType: 'article', likeTime: '2天前' },
          { id: 2, userId: 4, userName: '赵六', avatar: 'https://picsum.photos/id/1025/200', contentId: '2001', contentTitle: '分享一个实用技巧', contentType: 'micro', likeTime: '5天前' }
        ];
        this.totalLikes = this.historyLikes.length + this.newLikesCount;
      }, 500);
    },
    
    // 清除新消息计数
    clearNewMessages() {
      this.newFansCount = 0;
      this.newLikesCount = 0;
      
      // 实际项目中这里应该调用接口，通知服务器已读
    },
    
    // 导航到新增粉丝列表
    navigateToFansList() {
      uni.navigateTo({
        url: '/pages/ucenter/newFansList'
      });
    },
    
    // 导航到点赞信息列表
    navigateToLikesList() {
      uni.navigateTo({
        url: '/pages/ucenter/interactionsList'
      });
    }
  }
};
</script>

<style scoped>
.message-page {
  background-color: #f5f5f7;
  min-height: 100vh;
}

/* 页面标题 */
.page-header {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

/* 消息卡片区域 */
.message-cards {
  padding: 15px;
}

.message-card {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.message-card:active {
  transform: scale(0.99);
}

.card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.card-content {
  flex: 1;
}

.card-title {
  font-size: 16px;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

.card-desc {
  font-size: 14px;
  color: #666;
}

.card-badge {
  width: 28px;
  height: 28px;
  background-color: #ff3b30;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-text {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
}

/* 无消息提示 */
.no-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.no-message-img {
  width: 120px;
  height: 120px;
  margin-bottom: 15px;
}

.no-message-text {
  font-size: 16px;
  color: #999;
}

/* 历史消息区域 */
.history-section {
  padding: 0 15px;
}

.section-title {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
  display: block;
}

.history-list {
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
}

.history-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.history-item:last-child {
  border-bottom: none;
}

.item-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.item-content {
  flex: 1;
}

.item-title {
  font-size: 16px;
  color: #333;
  display: block;
  margin-bottom: 3px;
}

.item-desc {
  font-size: 13px;
  color: #666;
}

.item-arrow {
  color: #999;
}
</style>
    